<template>
   <div class="wp-container">
      <!-- 头部 -->
     <div class="wp-container__header" :style="{height:headerHeight+'px'}">
         <slot name="header"/>
     </div>
      <div class="wp-container__content">
      <!-- 左边导航栏 -->
      <div class="wp-aside" :style="{'width':asideWidth+'px'}">
          <slot name="aside"/>
      </div>
      <!-- 右边内容 -->
      <div class="wp-main" :style="{left:asideWidth+15+'px'}">
        <slot/>
      </div>
    </div>
   </div>
</template>

<script>
export default {
  props: {
    headerHeight: {type: Number, default: 60},
    asideWidth: {type: Number, default: 280}
  },
  data () {
    return {
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.wp-container{
  padding: 0 15px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  &__header{
    padding: 15px;
    position: relative;
  }
  &__content {
    position: relative;
    height: 100%;
    flex: 1;
    display: flex;
    overflow: hidden;
  }
}

.wp-aside {
  height: 100%;
  overflow: auto;
  margin-right: 10px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius:4px;
}
.wp-main {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius:4px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}
</style>
